<style type="text/css">
td input {float:left}
td span.error {position:static;float:left}
</style>
<div class="pageContent" name="configPanel">
	<form method="post"
		class="pageForm required-validate">
		<div class="pageFormContent">
			<input type="hidden" name="navTabId" value="${navTabId!''}">
			<dl>
				<dt>源语言：</dt>
				<dd>
					<select name="sourceLanguageCode">
						<option value="" selected>默认</option> <#list languages as
						language>
						<option value="${language.languageCode!''}">${language.languageName!''}</option>
						</#list>
					</select>
				</dd>
			</dl>
			<dl>
				<dt>目标语言：</dt>
				<dd>
					<select name="toLanguageCode"> <#list languages as
						language>
						<option value="${language.languageCode!''}"<#if
							language_index==0>selected</#if>>${language.languageName!''}</option>
						</#list>
					</select>
				</dd>
			</dl>
			<dl class="nowrap">
				<dt>枚举码类型编码：</dt>
				<dd>
					<input name="eCodeType" type="text" maxlength="255"
						class="alphanumeric toUp" size="150" />
				</dd>
			</dl>
			<dl>
				<dd>
					<div class="buttonActive">
						<div class="buttonContent">
							<button type="button" name="btnNext">下一步</button>
						</div>
					</div>
				</dd>
			</dl>
		</div>
	</form>
</div>
<div class="pageContent" name="translatePanel" width="100%">
	<form method="post"
		action='${rc.getContextPath()}/manage/management/adminECode/saveTranslate'
		class="pageForm required-validate"
		onsubmit="return validateCallback(this);">
		<input type='hidden' name='languageCode' value='' />
		<div class="panelBar">
			<ul class="toolBar">
				<li><a class="test" name="btnCopyFormSource"
					href="javascript:void(0);"><span>从源资源复制</span></a></li>
				<li><a class="grant" name="btnClear" href="javascript:void(0);"><span>清除目标资源</span></a>
				</li>
				<li><a class="rearrangeAll" name="btnToReplace"
					href="javascript:void(0);"><span>替换</span></a></li>
				<li class="" style="float: right; margin-right: 10px; border-width: 0px;"><div class="buttonActiveGrey"><div class="buttonContent"><button type='button' name="btnBack" onClick="javascript:void(0);">返回</button></div></div></li>
				<li class="" style="float: right; margin-right: 10px;"><div class="buttonActive"><div class="buttonContent"><button type='button' name="btnSave" onClick="javascript:void(0);">保存</button></div></div></li>
			</ul>
			
		</div>
		<table class="table border" width="100%" layoutH="0">
			<thead>
				<tr>
					<th width="20">序号</th>
					<th width="50">枚举码类型编码</th>
					<th width="50">枚举码编码</th>
					<th width="100">源语言描述</th>
					<th width="100">目标语言描述</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</form>
</div>
<script type="text/javascript">
(function($) {
	var page = DWZ.context();
	
	//获取表格表头的宽度
	var thWidthArray = [];
	//用于延迟执行隐藏方法，等待DWZ组件进行表格渲染
	setTimeout(function(){
		$("div[name='translatePanel']",page).hide();
	},0)
	
	//根据下标及HTML字符串生成TD元素的HTML，自动匹配表头宽度
	function generateTdEl(index,html){
		//return "<td style='width:"+thWidthArray[index]+"px;' >"+html+"</td>";
		return "<td width="+thWidthArray[index]+" >"+html+"</td>";
	}
	
	//根据名称与值生成隐藏元素HTML
	function generateHiddenEl(name,value){
		return "<input type='hidden' name='"+name+"' value='"+value+"'/>";
	}
	
	//给下一步按钮绑定点击事件
	$("div[name='configPanel'] button[name='btnNext']",page).on("click",function(){
		
		var sourceLanguageCode = $("div[name='configPanel'] select[name='sourceLanguageCode']",page).val();
		var toLanguageCode = $("div[name='configPanel'] select[name='toLanguageCode']",page).val();
		if(sourceLanguageCode===toLanguageCode){
			alertMsg.error('源语言和目标语言相同，请选择不同的语言进行翻译操作。');
            return false;
		}
		
		var eCodeType = $("div[name='configPanel'] input[name='eCodeType']",page).val();
		//AJAX请求获取枚举码信息
 		DWZ.ajax({
			type : 'post',
			dataType : 'json',
			url : '${rc.getContextPath()}/manage/management/adminECode/toTranslate',
			data : {sourceLanguageCode : sourceLanguageCode,toLanguageCode : toLanguageCode,eCodeType : eCodeType},
			success : function(json){
					//PANEL切换
					$("div[name='configPanel']",page).hide();
					$("div[name='translatePanel']",page).show();
					$("div[name='translatePanel'] table tbody",page).html();
					if(json.data && 0<json.data.length){
 						//初始化表格头信息
						if(0==thWidthArray.length){
							$.each($("div[name='translatePanel'] table th",page),function(i,e){
								thWidthArray.push($(e).css("width"));
							});
						}
						
						//如果包含数据，则进行表格渲染及语言编码赋值
						$("input[name='languageCode']").val(toLanguageCode);
						
						var trHtml = [];
						$.each(json.data,function(i,e){
 							var html = "<td width='20'>"+(i+1)+"</td><td width='50'>"+e.eCodeType+"</td><td width='50'>"+e.eCode+"</td><td width='100'>"+e.eCodeText+"</td><td width='100'></td>";
 							trHtml.push("<tr>");
 							trHtml.push(generateTdEl(0,(i+1)));
 							trHtml.push(generateTdEl(1,e.eCodeType+generateHiddenEl("eCodeTlList["+i+"].eCodeType",e.eCodeType)));
 							trHtml.push(generateTdEl(2,e.eCode+generateHiddenEl("eCodeTlList["+i+"].eCode",e.eCode)));
 							trHtml.push(generateTdEl(3,e.eCodeText||''));
 							trHtml.push(generateTdEl(4,"<input type='text' size='160' class='textInput' name='eCodeTlList["+i+"].eCodeText' maxlength='100' value='"+(e.eCodeTextTl||'')+"'/>"));
 							trHtml.push("</tr>");
						});
						
						$("div[name='translatePanel'] table tbody",page).html(trHtml.join(""));
					};
				
			}
 		});
		
	});
	
	//给清除目标资源按钮绑定点击事件
	$("div[name='translatePanel'] a[name='btnClear']",page).on("click",function(){
		$.each($("div[name='translatePanel'] table input[type='text']",page),function(i,e){
			$(e).val('');
		})
	});
	
	//给从源资源复制按钮绑定点击事件
	$("div[name='translatePanel'] a[name='btnCopyFormSource']",page).on("click",function(){
		$.each($("div[name='translatePanel'] table input[type='text']",page),function(i,e){
			$(e).val($(e).parent().prev().html());
		})
	});
	
	//给返回按钮绑定点击事件
	$("div[name='translatePanel'] button[name='btnBack']",page).on("click",function(){
		$("div[name='translatePanel']",page).hide();
		$("div[name='configPanel']",page).show();
	});
	
	//给替换按钮绑定点击事件
	$("div[name='translatePanel'] a[name='btnToReplace']",page).on("click",function(){
		$.pdialog.open('${rc.getContextPath()}/manage/pages/admin/ecode/eCode_replace.html', '',"替换",{
			width : '350',
			height : '190',
			mask : false,
			minable : false
		});
	});
	
	

	//给保存按钮绑定点击事件
	$("div[name='translatePanel'] button[name='btnSave']",page).on("click",function(){
		$("div[name='translatePanel'] form",page).submit();
	});
	
	
	
})(jQuery);
</script>